<cdk-virtual-scroll-viewport class="list-demo-container" itemSize="106">
  <lv-list [lvHoverable]="false">
    <lv-list-item *cdkVirtualFor="let item of data" [lvExtra]="extraRender" [lvActions]="actionsRender">
      <lv-list-item-meta
        [lvDataSource]="item"
        [lvAvatar]="avatarRender"
        [lvTitle]="item.title"
        [lvDescription]="descriptionRender"
      ></lv-list-item-meta>

      <ng-template #extraRender>
        <span>{{ item.extra }}</span>
      </ng-template>
      <ng-template #actionsRender>
        <lv-operation-menu [lvItemsFn]="getItems" lvMaxShowNum="2"></lv-operation-menu>
      </ng-template>
    </lv-list-item>
  </lv-list>
</cdk-virtual-scroll-viewport>

<ng-template #avatarRender let-data>
  <span class="list-demo-avatar">
    <img [src]="data.image" alt="avatar" />
  </span>
</ng-template>

<ng-template #descriptionRender let-data>
  <div>
    <p style="margin-bottom: 4px">{{ data.description }}</p>
    <lv-tag [(ngModel)]="tags"></lv-tag>
  </div>
</ng-template>
